import React from 'react'

import { Upload, Modal, Button } from 'antd';
import { getStorage, setStorage } from '../utils/utils'
// import { PlusOutlined } from '@ant-design/icons';

function getBase64(file) {
  console.log(file)
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}



class UpDate extends React.Component {
  state = {
    previewVisible: false,
    previewImage: '',
    previewTitle: '',
    imgUrl: '',
    fileList: [],
  }

  componentDidMount() {
    this.props.onRef(this)
  }

  handleCancel = () => this.setState({ previewVisible: false });

  handlePreview = async file => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }
    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
      previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
    });
  };

  handleChange = ({ fileList }) => this.setState({ fileList });

  uploadP = () => {
    let Name = '乌栖曲'
    console.log(this.state.fileList === [])
    if (this.state.fileList.length>0) {
      console.log(222)
      let formData = new FormData()
      formData.append('files', this.state.fileList[0].originFileObj)
      formData.append('userId', getStorage('user').Userid)
      this.axios({
        url: '/UploadHeadImg',
        method: 'post',
        data: formData
      }).then(data => {
        this.setState({
          imgUrl: data.data.imgUrl
        })
      })
    }else{
      
    }


  }


  render() {
    const { previewVisible, previewImage, fileList, previewTitle } = this.state;
    const uploadButton = (
      <div>
        {/* <PlusOutlined /> */}
        <div style={{ marginTop: 8 }}>Upload</div>
      </div>
    );

    const props = {
      onRemove: file => {
        this.setState(state => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: file => {
        // console.log(file)
        const isLt2M = file.size / 1024 < 500;
        if (!isLt2M) {
          Modal.error({
            title: '超过500K限制，不允许上传~',
          });
          return;
        } else {
          new Promise((resolve, reject) => {
            this.setState(state => ({
              fileList: [...state.fileList, file],
            }));
            resolve(200)
          }).then(data => {
            // console.log(file)
          })
          return false;
        }
      },
    };

    return (
      <div>
        <Upload
          listType="picture-card"
          fileList={fileList}
          {...props}
          onPreview={this.handlePreview}
          onChange={this.handleChange}
        >
          {fileList.length >= 1 ? null : uploadButton}
        </Upload>
        <Modal
          visible={previewVisible}
          title={previewTitle}
          footer={null}
          onCancel={this.handleCancel}
        >
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
        {/* <Button onClick={() => this.uploadP()}>上传图片</Button> */}
      </div>
    )
  }
}

export default UpDate